<template>
  <div class="order-review-new-item">
    <div class="order-review-new-item-content">
      <white-space/>
      <wing-blank>
        <van-card :price="item.totalAmount" :title="item.name" :thumb="item.imageUrl"/>
      </wing-blank>
      <van-cell center>
        <template #title>
          <span class="review-rating-title">评分</span>
        </template>
        <template #default>
          <div class="review-rating-value">
            <span class="review-rating-value-label">{{ ratingLabel }}</span>
            <van-rate v-model="review.rating" :size="20" void-icon="star" void-color="#eee"/>
          </div>
        </template>
      </van-cell>
      <div class="review-body">
        <van-field class="review-body-field" type="textarea"
                   v-model="review.body"
                   :border="false" rows="4" autosize
                   maxlength="500" show-word-limit
                   :placeholder="bodyPlaceholder"
                   :rules="[{ required: true, message: '请输入评价内容' }]"/>
      </div>
      <wing-blank>
        <van-uploader v-model="review.imageUrls" :max-count="4" multiple/>
      </wing-blank>
      <van-cell class="anonymous-review-cell"
                value-class="anonymous-review-cell-value"
                value="评价将以匿名的形式展现" :border="false" center clickable>
        <template #title>
          <van-checkbox v-model="anonymous" checked-color="#ee0a24">
            匿名评价
          </van-checkbox>
        </template>
      </van-cell>
    </div>
    <white-space/>
  </div>
</template>

<script>
import { discuss, order as Order } from "@mall/api-services"
import * as _ from "lodash"
import { Card, Cell, Checkbox, Field, Rate, Uploader } from "vant"
import WhiteSpace from "@/components/WhiteSpace"
import WingBlank from "@/components/WingBlank"

export default {
  name: "OrderReviewNewItem",
  components: {
    WingBlank,
    WhiteSpace,
    [Card.name]: Card,
    [Cell.name]: Cell,
    [Checkbox.name]: Checkbox,
    [Field.name]: Field,
    [Rate.name]: Rate,
    [Uploader.name]: Uploader,
  },
  props: {
    item: new Order.OrderItem(),
    review: Order.OrderReview,
  },
  data() {
    return {
      body: "",
      anonymous: false,
    }
  },
  watch: {
    anonymous(newAnonymous) {
      this.changeAnonymous(newAnonymous)
    },
  },
  computed: {
    ratingLabel() {
      const { review } = this
      const { rating } = review
      if (rating === 5) {
        return "非常满意"
      } else if (rating === 4) {
        return "满意"
      } else if (rating === 3) {
        return "一般"
      } else if (rating === 2) {
        return "失望"
      } else if (rating === 1) {
        return "生气"
      }
      return "评分"
    },
    bodyPlaceholder() {
      const { review } = this
      const { rating } = review
      if (rating === 5) {
        return "看来商品不错，快给小伙伴们分享一下商品的优点吧"
      } else if (rating === 4) {
        return "说说使用商品的感受吧，大家都在等着你的心得呢"
      } else if (rating === 3) {
        return "告诉我们商品美中不足的地方吧，我们一定会努力改进"
      } else if (rating === 2) {
        return "一定是遇到什么问题了，快来说说吧，我们一定会重视问题帮你解决"
      } else if (rating === 1) {
        return "很抱歉这是一次不愉快的购物体验，可以告诉我们遇到了什么问题，我们一定会重视问题帮你解决"
      }
      return "请输入评价内容"
    },
  },
  methods: {
    changeAnonymous(anonymous) {
      if (anonymous) {
        this.review.author = new discuss.Author()
        this.review.author.anonymous = true
      } else {
        _.unset(this.review, "author")
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.order-review-new-item {

  .order-review-new-item-content {
    background: #fff;
  }

  .review-rating-title {
    font-size: 16px;
  }

  .review-rating-value {
    display: inline-flex;

    .review-rating-value-label {
      margin-right: 6px;
      color: $gray-7;
    }
  }

  .review-body {
    .review-body-field {
    }
  }

  .review-images-title {
    color: $gray-5;
  }

  .anonymous-review-cell {
    &:before {
      margin: 0 16px;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      border-top: 1px solid $gray-3;
      transform: scaleY(.5);
    }
  }

  .anonymous-review-cell-value {
    font-weight: 400;
    font-size: 12px;
    color: $gray-6;
  }
}
</style>
